<template>
  <div>
    <draggable
      v-model="rows"
      class="row sortable-list"
      style="background: grey;padding: 10px;"
      animation="300"
    >
      <div
        v-for="row in rows"
        :key="row.index"
        class="sortable"
        style="background: red;margin-bottom: 10px; padding: 10px;"
      >
        <!-- {{ row }} -->
        <draggable
          :list="row.items"
          :group="{ name: 'row' }"
          class="row-item"
          :disabled="disabled"
          :pull="false"
          :put="false"
        >
          <div
            v-for="item in row.items"
            :key="item.title"
            class="row-v"
            style="background: rgba(0, 191, 255, 0.742);margin: 10px;"
          >
            <div style="height: 100px;">{{ item.title }}</div>
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'TwoLists',
  display: 'Two Lists',
  order: 1,
  components: {
    draggable
  },
  data() {
    return {
      enabled: true,
      disabled: false,
      rows: [
        {
          index: 1,
          items: [
            {
              title: 'item 1'
            }
          ]
        },
        {
          index: 2,
          items: [
            {
              title: 'item 2'
            },
            {
              title: 'item 3'
            }
          ]
        }
      ]
    }
  },
  methods: {
    // add: function() {
    //   this.list.push({ name: 'Juan' })
    // },
    // replace: function() {
    //   this.list = [{ name: 'Edgard' }]
    // },
    // clone: function(el) {
    //   return {
    //     name: el.name + ' cloned'
    //   }
    // },
    // log: function(evt) {
    //   window.console.log(evt)
    // }
  }
}
</script>
<style scoped lang="scss">
.row{
  height: 100%;
}
.row-item{
  display: flex;
  -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-flex: 1
}
.buttons {
  margin-top: 35px;
}

.row-v {
  height: 150px;
  width: 200px;

}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
